<template>
  <div class="personal">
    <div class="header">
      <div class="label">{{$t('Personal Settings')}}</div>
      <div class="divider"></div>
    </div>
    <div class="userinfo">
      <el-form inline>
        <el-form-item>
          <el-input class="dark_input2" :placeholder="$t('Name')" v-model="userInfo.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input class="dark_input2" :placeholder="$t('Mail')" v-model="userInfo.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input class="dark_input2" :placeholder="$t('Password')" v-model="userInfo.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSaveUser">{{ $t("Save")}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="userinfo">
      <el-form inline label-position="top">
        <el-form-item :label="$t('Position')">
          <el-input class="dark_input2" :placeholder="$t('Position')" :value="userInfo.position"></el-input>
        </el-form-item>
        <el-form-item :label="$t('FontSize')">
          <div class="font-list">
            <!-- 设置文字大小列表，选中状高亮     -->
            <div :class="['font-item', item === fontSize ? 'active' : '']" v-for="item in fontList" :key="item" @click="handleChangeFontSize(item)">
              {{ item }}
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('Language')">
          <div class="font-list">
            <!-- 设置文字大小列表，选中状高亮     -->
            <div :class="['font-item', item === language ? 'active' : '']" v-for="item in languageList" :key="item" @click="handleChangeLanguage(item)">
              {{ item }}
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="header">
      <div class="label">{{$t('Right')}}</div>
      <div class="divider"></div>
    </div>
    <div class="menu">
      <div class="menu-item" v-for="item in menuList" :key="item.id">
       <div class="menu-item-left">
         <img class="svg-icon height_40px" :src="item.icon"></img>
         <div class="menu-name">{{ item.name }}</div>
       </div>
        <el-switch class="switch" size="small" v-model="item.checked" disabled></el-switch>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'personal-setting',
  data() {
    return {
      userInfo: {},
      fontSize: 14,
      fontList: [
          '8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'
      ],
      language: 'zh',
      languageList: [
         'zh', 'en', 'ua', 'ru'
      ],
      menuList: [
        {
          id: 'CORRESPONDENCE',
          icon: require('@/assets/correspondence.svg'),
          name: 'Chat&Mail',
          checked: false
        },
        {
          id: 'UPLOAD_MEDIA',
          icon: require('@/assets/settings.svg'),
          name: 'Upload media',
          checked: false
        },
        {
          id: 'SENDER',
          icon: require('@/assets/sender.svg'),
          name: 'Sender',
          checked: false
        },
        {
          id: 'ICEBREAKERS',
          icon: require('@/assets/icebreakers.svg'),
          name: 'iceBreakers',
          checked: false
        },
        {
          id: 'SETTINGS',
          icon: require('@/assets/settings.svg'),
          name: 'Settings',
          checked: false
        },
        {
          id: 'PROFILES',
          icon: require('@/assets/profiles.svg'),
          name: 'Manage profiles',
          checked: false
        },
        {
          id: 'FREE_PROFILES',
          icon: require('@/assets/profiles.svg'),
          name: 'Manage free profiles',
          checked: false
        },
        {
          id: 'WALLET',
          icon: require('@/assets/wallet.svg'),
          name: 'Wallet',
          checked: false
        },
        {
          id: 'NEWS_FEED',
          icon: require('@/assets/news-feed.svg'),
          name: 'News feed',
          checked: false
        }
      ]
    }
  },
  mounted() {
    this.fontSize = this.$store.getters.fontSize
    this.language = this.$store.getters.language
    // 获取个人配置
    this.$http.getPersonalProfile().then(res => {
      this.userInfo = res;
      // 遍历userinfo中permissions数组中权限与menuList每一项id对比，如果存在改变checked属性为true
      (this.userInfo.permissions || []).forEach(item => {
        this.menuList.forEach(menu => {
          if (item === menu.id) {
            menu.checked = true
          }
        })
      })
    })
  },
  methods: {
    handleSaveUser() {
      this.$http.updatePersonalProfile(this.userInfo).then(res => {
        this.$message.success(this.$t('Success'))
      })
    },
    handleChangeFontSize(fontSize) {
      this.fontSize = fontSize
      this.$store.commit('app/SET_FONT_SIZE', fontSize)
    },
    handleChangeLanguage(language) {
      this.language = language
      this.$store.commit('app/SET_LANGUAGE', language)
      // 接口设置语言
      this.$http.setLanguage(language).then(res => {
        this.$message.success(this.$t('Success'))
      })
      // vuei18n设置语言
      this.$i18n.locale = language
    }
  }
}
</script>
<style lang="scss">
.personal {
  height: 100%;
  display: flex;
  flex: 1 0 80%;
  flex-direction: column;
  gap: min(calc(16 / 14 * 1rem),calc(16 / (900 / 100) * 1vh));
  padding: min(calc(24 / 14 * 1rem),calc(24 / (900 / 100) * 1vh)) min(calc(13 / 14 * 1rem),calc(13 / (900 / 100) * 1vh)) min(calc(16 / 14 * 1rem),calc(16 / (900 / 100) * 1vh)) min(calc(24 / 14 * 1rem),calc(24 / (900 / 100) * 1vh));
  overflow-y: auto;
  border-radius: 1.143rem;
  background-color: #0e222e;
  .menu {
    display: flex;
    flex-direction: column;
    gap: 0.857rem;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 2px;
    overflow-y: auto;
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.571rem;
      cursor: pointer;
      border-radius: 0.857rem;
      outline: 1px solid #1C7292;
      background-color: #112939;
      .menu-item-left {
        display: flex;
        gap: 0.571rem;
        align-items: center;
        .menu-name {
          display: flex;
          align-items: center;
          height: min(2.857rem,2.083vw);
          color: #dfdfdf;
          font-family: Manrope,sans-serif;
          font-size: 1.143rem;
          font-weight: 700;
          white-space: nowrap;
          letter-spacing: .01rem;
        }
      }
    }
  }
  .header {
    display: flex;
    gap: 2.286rem;
    align-items: center;
    font-weight: 700;
    letter-spacing: .01rem;
    color: #dfdfdf;
    margin-bottom: 5px;
    .label {
      font-size: 1.714rem;
    }
    .divider {
      flex: 1 0 50%;
      border-bottom: 1px solid #233645;
    }
  }
  .userinfo {
    display: flex;
    gap: min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw));
  }
  .save-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.643rem;
    cursor: pointer;
    border: 1px solid #1C7292;
    border-radius: 0.571rem;
    background: #112939;
    color: #71d2e5;
    font-size: 1.143rem;
    font-weight: 500;
    opacity: 0.4;
  }
  .font-list {
    display: flex;
    align-items: center;
    height: 28px;
    line-height: 28px;
    border: 1px solid #3C6382;
    border-radius: 5px;
    padding: 0 2px;
    .font-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: min(calc(32 / 14 * 1rem),calc(32 / (1920 / 100) * 1vw));
      cursor: pointer;
      border-radius: 0.429rem;
      color: #fff;
      margin: 0 2px;
      padding: 2px;
    }
    .font-item.active {
      background-color: #345067;
      color: #67cae8;
    }
  }
}
</style>
